{include file="common/head"}
<style>
    .child {
        display: none;
    }
</style>
<div class="card">
    <div class="card-header">
        <button type="button" class="btn  btn-primary" id="addAuth">添加权限</button>
        <!-- <div class="row">
            <div class="col-md-4">
                <div class="row">
                    <label class="col-sm-4 col-form-label"><span class="text-danger">*</span> 角色搜索</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control pull-left" name="name" value="" placeholder="请输入角色名称">
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary me-1">搜索</button>
                <button type="reset" class="btn btn-default">重置</button>
            </div>
        </div> -->
    </div>
    <div class="card-body">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>#</th>
                    <th>描述</th>
                    <th>请求地址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {volist name="list" id="auth" key="k"}
                <tr>
                    <th scope="row">{$auth.id}</th>
                    <td><input type="text" data-id="{$auth.id}" class="description form-control" name="description"
                            value="{$auth.description}"></td>
                    <td><input class="url form-control" data-id="{$auth.id}" type="text" name="url" value="{$auth.url}">
                    </td>
                    <td>
                        <button class="btn btn-sm btn-success" onclick="show('{$auth.id}')">展开</button>
                        <button class="btn btn-sm btn-danger" onclick="del(this ,'{$auth.id}')">删除</button>
                    </td>
                </tr>
                {if $auth.child}
                {foreach $auth.child as $m => $n}
                <tr class="id-{$auth.id} child">
                    <th scope="row">{$n.id}</th>
                    <td><input type="text" data-id="{$n.id}" class="description form-control" name="description"
                            value="| -- {$n.description}"></td>
                    <td><input class="url form-control" data-id="{$n.id}" type="text" name="url" value="{$n.url}">
                    <td><button class="btn btn-sm btn-danger" onclick="del(this ,'{$n.id}')">删除</button></td>
                </tr>
                </tr>
                {/foreach}
                {/if}
                {/volist}
            </tbody>
        </table>
    </div>
</div>
{include file="common/bottom"}
<script>

    layui.use(function () {
        var form = layui.form
        var layer = layui.layer

        $('.url').change(function (e) {
            let id = $(e.target).data('id')
            let url = $(e.target).val()
            $.get('/admin/auth/update', { id: id, url: url }, (e) => {
                if (e.code == 200) {
                    layer.msg('操作成功')
                } else {
                    layer.msg('操作失败')
                }
            })

        })
        $('.description').change(function (e) {
            let id = $(e.target).data('id')
            let description = $(e.target).val()
            $.get('/admin/auth/update', { id: id, description: description }, (e) => {
                if (e.code == 200) {
                    layer.msg('操作成功')
                } else {
                    layer.msg('操作失败')
                }
            })
        })
        $('#addAuth').click(() => {
            layer.open({
                title: '添加角色'
                , type: 2
                , area: ['80%', '80%']
                , resize: false,
                shadeClose: true
                , content: '/admin/auth/add'
            })
        })
    })
</script>
<script>
    function del(it, id) {
        layer.confirm('确定要删除吗', () => {
            $.get('/admin/auth/del', { id: id }, (e) => {
                if (e.code == 200) {
                    layer.msg('操作成功')
                    $($(it).parents()[1]).remove()
                } else {
                    layer.msg('操作失败')
                }
            })
        })
    }
    function show(id) {
        let cls = '.id-' + id
        for (i = 0; i < $(cls).length; i++) {
            $($(cls)[i]).toggle(200)
        }
    }
</script>